<template>
    <el-row v-loading="loading">
        <!--查询条件-->
        <el-row class="search-form-row">
            <el-form :inline="true" class="demo-form-inline">
                <!--查询条件：设备名称-->
                <el-form-item :label="$t('video.deviceName')" label-width="100px">
                    <el-input type="text" v-model="searchGuid" @keyup.enter.native="query(1)"></el-input>
                </el-form-item>
                <!--查询条件：分辨率-->
                <el-form-item :label="$t('video.resolvingPower')" label-width="100px">
                    <el-select v-model="type" style="width: 90%;" >
                        <el-option :label="$t('persons.whole')" value="">
                        </el-option>
                        <el-option v-for="type in resolutionTypes"  :key="type.value" :label="type.label" :value="type.value"></el-option>
                    </el-select>
                </el-form-item>
                <!--查询按钮-->
                <el-form-item>
                    <el-button type="primary" @click="query(1)">{{$t('standard.query')}}</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!--结果列表-->
        <el-row>
            <el-row v-for="item in deviceData" :key="item.id" class="device-row" v-on:mouseover.native="over($event)" v-on:mouseout.native="out($event)" >
                <img src="../../../assets/device-icon.png" style="float: left; margin-left: 50px;margin-top: 30px;"/>
                <div style="width: auto; margin-left: 10px;float: left;margin-top: 30px;">
                    <p style="margin: 3px;">{{$t('video.deviceName')}}{{item.guid}}</p>
                    <p style="margin: 3px;">
                        <span>{{$t('device.resolvingPower')}}{{item.resolution}}</span>
                        <span style="margin-left: 20px">{{$t('video.userTime')}}<span v-html="transToMinute(item.spendTime)"></span></span>
                        <span style="margin-left: 20px">{{$t('video.zwNumber')}}{{item.zwanNumber}}</span>
                        <span style="margin-left: 20px">{{$t('video.zwPassword')}}{{item.zwanPassword}}</span>
                    </p>
                    <p style="margin: 3px;">
                        <span>{{$t('persons.company')}}<span v-html="getCompanyName(item.companyId)"></span></span>
                    </p>
                </div>
            </el-row>
        </el-row>
        <!--分页查询-->
        <el-row style="text-align: right;margin-top: 10px">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageInfo.currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.totalNum">
            </el-pagination>
        </el-row>
    </el-row>
</template>

<script>
    import device from './device'

    export default device;
</script>

<style>
    .search-form-row{
        text-align: left;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px !important;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }

    .device-row {
        height: 140px;
        text-align: left;
        cursor: pointer;
        /*background: url(../../../assets/device-bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;*/
    }

    .device-on {
        background-image: url(../../../assets/device-bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
</style>